<html>
<head>
    <title>菜单管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">参数管理</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item label="">
                            <el-input v-model="optionName"  placeholder="参数中文名称" style="width: 220px"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="searchOption" >查询</el-button>
                            <el-button type="success" @click="addClick" >新增</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table   border stripe style="width: 100%" :data="tabData">
                    <el-table-column prop="optionName" label="参数英文名称" align="center">
                    </el-table-column>
                    <el-table-column prop="optionNameCN" label="参数中文名称" align="center">
                    </el-table-column>
                    <el-table-column prop="optionGroup" label="参数组名"  align="center">
                    </el-table-column>
                    <el-table-column prop="optionValue" label="参数值"  align="center">
                    </el-table-column>
                    <el-table-column prop="optionDescription" label="说明" align="center">
                    </el-table-column>
                    <el-table-column label="操作"  align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" round size="small"  icon="el-icon-edit"></el-button>
                            <el-button  round icon="el-icon-delete"  size="small" @click="delClick(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑参数':'新增参数'"
                   :visible.sync="editFormVisible"
                   center
                   width="35%"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="参数英文名称" prop="optionName" :rules="[
                             {required:true,message:'参数英文名称不能为空!',trigger:'blur'}
                ]" >
                    <el-input v-model="form.optionName" ></el-input>
                </el-form-item>

                <el-form-item label="参数中文名称" prop="optionNameCN" :rules="[
                             {required:true,message:'参数中文名称不能为空!',trigger:'blur'}
                ]" >
                    <el-input v-model="form.optionNameCN" ></el-input>
                </el-form-item>
                <el-form-item label="参数组名" prop="optionGroup" :rules="[
                             {required:true,message:'参数组名名称不能为空!',trigger:'blur'}
                ]" >
                    <el-input  v-model="form.optionGroup" ></el-input>
                </el-form-item>
                <el-form-item label="参数值" prop="optionValue" :rules="[
                             {required:true,message:'参数值不能为空!',trigger:'blur'}
                ]" >
                    <el-input v-model="form.optionValue" ></el-input>
                </el-form-item>

                <el-form-item label="说明">
                    <el-input  v-model="form.optionDescription" ></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelClick('form')" style="background-color: #7eb8b0  ">取消</el-button>
                <el-button  @click="submitClick('form')" style="margin-left: 40px;background-color: #f9b317;">保存</el-button>
            </div>
        </el-dialog>
    </div>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
            editFormVisible:false,
            tabData:[],
            form:{},
            optionName:'',
            editMod:false
        },
        methods:{

            addClick:function(data) {
                this.editMod = false
                this.editFormVisible = true
            },
            handleClick(data){
                this.editMod = true
                this.editFormVisible = true
                this.form = data
            },
            searchOption(){
                this.getSysOption({optionNameCN:this.optionName})
            },
            delClick(data) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('option/Delete',{optionName:data.optionName}).success((res)=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getSysOption();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitClick(formName){
                this.$refs[formName].validate((valid) =>{
                    if (valid){
                        if(!this.editMod){
                            HttpUtil.get('option/Add',this.form).success((res)=>{
                                this.$message({
                                    type:'success',
                                    message:'保存成功'
                                });
                                this.getSysOption();
                            })
                        }else{
                            HttpUtil.get('option/Update',this.form).success((res)=>{
                                this.$message({
                                    type:'success',
                                    message:'修改成功'
                                });
                                this.getSysOption();
                            })
                        }

                    }else{
                        this.$message({
                            type:'error',
                            message:'输入内容不能为空'
                        })
                    }
                });
            },
            cancelClick(){
                this.form={};
                this.editFormVisible = false;

            },
            getSysOption(params){
                if(params==null){
                    var params = {
                        pageno:1,
                        pagesize: 200
                    }
                }else{
                    params['pageno']=1;
                    params['pagesize']=200;
                }

                HttpUtil.get('option/List',params).success((res)=>{
                     this.tabData = res.data;
                })
            }

        },
        created:function(){
               this.getSysOption();
        },
        mounted:function(){
        }
    });


</script>

</body>
</html>
